<template>
  <div class="home-category">
    <a
      v-for="(item, index) in categories"
      :key="item.id"
      :class="{ active: active === index }"
      @click="chooseCategory(item, index)"
    >
      {{ item.name }}
    </a>
  </div>
</template>

<script>
export default {
  name: 'Category',
  props: {
    categories: {
      required: true,
      type: Array
    }
  },
  data() {
    return {
      active: 0
    }
  },
  methods: {
    chooseCategory(item, index) {
      this.active = index
      this.$emit('changeCategory', item.id)
    }
  }
}
</script>

<style scoped>
.home-category {
  height: 44px;
  padding: 0 20px;
  background-color: #fff;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  background-color: #001d25;
  color: #fff;
  font-size: 14px;
}
.home-category a {
  display: inline-block;
  height: 44px;
  margin-right: 10px;
  line-height: 44px;
  padding: 0 8px;
  cursor: pointer;
}
.active {
  border-bottom: 3px solid #fff;
}
</style>
